<template>
  <halo-dialog direction="bottom" :visible="visible" @cancel="close">
    <van-area
      style="width: 100vw"
      title="请选择"
      :area-list="areaList"
      :columns-num="columnsNum"
      v-model="dataValue"
      @cancel="close"
      @confirm="confirm"
    />
  </halo-dialog>
</template>

<script>
import { Area } from 'vant';
import areaList from './area';
import HaloDialog from '../halo-dialog';

export default {
  components: {
    [Area.name]: Area,
    HaloDialog,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    value: {
      tyep: Array,
      default: () => [],
    },
    columnsNum: {
      type: Number,
      default: 2,
    },
  },
  emits: ['changename', 'change', 'update:visible', 'update:value'],
  data() {
    return {
      areaList,
      dataValue: '',
    };
  },
  watch: {
    value: {
      immediate: true,
      handler() {
        this.dataValue = this.value[this.value.length - 1];
      },
    },
  },
  methods: {
    close() {
      this.$emit('update:visible', false);
    },
    confirm(data = []) {
      const values = data.map((item) => item.code);
      this.dataValue = (values[values.length - 1] || {}).code;
      const name = data.map((item) => item.name).join(' ');
      this.$emit('update:value', values, name);
      this.$emit('change', values, name);
      this.$emit('changename', name);
      this.close();
    },
  },
};
</script>
